<template>
  <!-- 第一个 停电检测 -->
  <div>
    <!-- 二级标题 -->
    <dv-border-box-11 title="⚡️ 供货商统计" style="width: 940px; height: 480px">
      <div style="display: flex; align-items: center; width: 100%;">
        <!-- 三级标题 -->
        <div>
          <div>
            <dv-border-box-5
              :color="['#225762', '#225762']"
              style="top: 58px; left: 20px;"
            >
              <div
                style="
                  padding-left: 15px;
                  padding-top: 8px;
                  font-size: 18px;
                  font-weight: 700;
                  color: #33ffff;
                "
              >
                ⚠️ 供货商上月度占比
              </div>
            </dv-border-box-5>
          </div>

          <div>
            <dv-border-box-8
              style="
                top: 68px;
                left: 20px;
                width: 100%;
                height: 340px;
                color: #fff;
              "
            >
              <div
                style="
                  padding: 0px;
                  font-size: 18px;
                  font-weight: 700;
                  color: #fff;
                "
              >
                <bidirectionalDiagram></bidirectionalDiagram>
              </div>
            </dv-border-box-8>
          </div>
        </div>

        <!-- 下面 -->
        <div class="flex">
          <!--
          <div>
            三级标题
            <div>
              <dv-border-box-5
                :color="['#225762', '#225762']"
                style="top: 80px; left: 40px; width: 280px; height: 40px"
              >
                <div
                  style="
                    padding-left: 15px;
                    padding-top: 8px;
                    font-size: 18px;
                    font-weight: 700;
                    color: #33ffff;
                  "
                >
                  ⚒️ 配电多维分析
                </div>
              </dv-border-box-5>
            </div>

            <div>
              <dv-border-box-8
                style="
                  top: 86px;
                  left: 40px;
                  width: 385px;
                  height: 340px;
                  color: #fff;
                "
              >
                <div
                  style="
                    padding: 30px;
                    font-size: 18px;
                    font-weight: 700;
                    color: #fff;
                  "
                >
                  <scrollRankingChart></scrollRankingChart>
                </div>
              </dv-border-box-8>
            </div>
          </div>
          -->
          <div>
            三级标题
            <div>
              <dv-border-box-5
                :color="['#225762', '#225762']"
                style="top: 48px; left: 20px;"
              >
                <div
                  style="
                    padding-left: 15px;
                    padding-top: 8px;
                    font-size: 18px;
                    font-weight: 700;
                    color: #33ffff;
                  "
                >
                  💡 异常处理
                </div>
              </dv-border-box-5>
            </div>

            <div>
              <dv-border-box-8
                style="
                  top: 58px;
                  left: 20px;
                  width: 350px;
                  height: 340px;
                  color: #fff;
                "
              >
                <div
                  style="
                    padding: 25px 10px 25px 15px;
                    font-size: 18px;
                    font-weight: 700;
                    color: #fff;
                  "
                >
                  <!-- <scrollRankingBoard></scrollRankingBoard> -->
                  <percentPond></percentPond>
                  <typeWriter></typeWriter>
                </div>
              </dv-border-box-8>
            </div>
          </div>
        </div>
      </div>
    </dv-border-box-11>
  </div>
</template>

<style lang="scss" scoped>
.flex {
  display: flex;
}
</style>

<script setup lang="ts">
import ConicalBarChart from "/@/components/SixthComponent/ConicalBarChart.vue";

import bidirectionalDiagram from "/@/components/SixthComponent/bidirectionalDiagram.vue";

import scrollRankingChart from "/@/components/SixthComponent/scrollRankingChart.vue";
import percentPond from "/@/components/SixthComponent/percentPond.vue";

import typeWriter from "/@/components/SixthComponent/typeWriter.vue";

// import scrollRankingBoard from "/@/components/SixthComponent/scrollRankingBoard/src/main.vue";


</script>